<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>个人信息</p>
    </header>
    
    <!-- 用户信息部分 -->
    <div class="user-info" v-if="userInfo">
      <div class="avatar-container">
        <div class="avatar">
          <span class="avatar-text">{{userInfo.userName.charAt(0).toUpperCase()}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="label">用户名</div>
        <div class="content">{{userInfo.userName}}</div>
      </div>
      <div class="info-item">
        <div class="label">性别</div>
        <div class="content">{{userInfo.userSex === 1 ? '男' : '女'}}</div>
      </div>
    </div>

    <!-- 地址管理入口 -->
    <div class="address-manage" @click="toUserAddress">
      <div class="label">地址管理</div>
      <div class="content">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn" @click="logout">
      退出登录
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/views/Footer.vue'
import { userApi } from '@/api/user'
import { ElMessage } from 'element-plus'

export default {
  name: 'UserInfo',
  data() {
    return {
      user: {},
      userInfo: null
    }
  },
  async created() {
    this.user = this.$getSessionStorage('user')
    if (!this.user) {
      this.$router.push('/login')
      return
    }
    await this.getUserInfo()
  },
  components: {
    Footer
  },
  methods: {
    async getUserInfo() {
      try {
        if (!this.user.userName) {
          this.$message.error('用户名无效')
          return
        }

        const response = await userApi.getUserInfo({
          userName: this.user.userName
        })
        
        if (response && response.success) {
          this.userInfo = response.data
          console.log('获取到的用户信息:', this.userInfo)
        } else {
          this.$message.error(response?.message || '获取用户信息失败')
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        this.$message.error('获取用户信息失败')
      }
    },

    toUserAddress() {
      this.$router.push('/userAddress')
    },

    logout() {
      if (confirm('确认要退出登录吗？')) {
        localStorage.removeItem('token')
        sessionStorage.removeItem('user')
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.user-info {
  margin-top: 12vw;
  background-color: #fff;
}

.avatar-container {
  padding: 6vw 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
  background: linear-gradient(45deg, #0097FF, #00BCD4);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12vw;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.avatar-text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.info-item {
  display: flex;
  padding: 4vw;
  border-bottom: 1px solid #eee;
}

.info-item .label {
  flex: 0 0 20vw;
  color: #666;
  font-size: 4vw;
}

.info-item .content {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 4vw;
}

.info-item .content img {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
}

.address-manage {
  margin-top: 3vw;
  padding: 4vw;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.address-manage .label {
  font-size: 4vw;
  color: #333;
}

.address-manage .content i {
  font-size: 5vw;
  color: #999;
}

.logout-btn {
  margin: 6vw 4vw;
  height: 12vw;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.2vw;
  cursor: pointer;
}
</style> 